import 'dart:async';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

const CLOCK_INTERVAL = Duration(microseconds: 1000);
const ChineseWeekDays = <int, String>{
  1: '一',
  2: '二',
  3: '三',
  4: '四',
  5: '五',
  6: '六',
  7: '日',
};
String pad0(int num) {
  if (num < 10) {
    return '0${num.toString()}';
  }
  return num.toString();
}

class Clock extends StatefulWidget {
  static const name = "clock";
  const Clock({Key key}) : super(key: key);

  @override
  State<Clock> createState() => _ClockState();
}

class _ClockState extends State<Clock> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //实现全屏功能代码，一般写在按钮或者初始化函数里
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft, //全屏时旋转方向，左边
    ]);
    //隐藏状态栏
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Container(
              // child: Text("2022年05月23日 星期一"),
              ),
          Container(
            child: Center(
              child: new TimerWidget(),
            ),
          ),
          Container()
        ],
      ),
    );
  }
}

class ClockBaseStatefulWidget extends StatefulWidget {
  ClockBaseStatefulWidget({Key key}) : super(key: key);

  @override
  ClockBaseState createState() {
    var state = new ClockBaseState();
    state.startClock();
    return state;
  }
}

class ClockBaseState<T extends StatefulWidget> extends State {
  ClockBaseState() : super();

  DateTime now = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return new Text('ClockBaseState is not implemented!');
  }

  startClock() {
    Timer.periodic(CLOCK_INTERVAL, (Timer t) {
      if (!mounted) {
        return;
      }

      setState(() {
        now = DateTime.now();
      });
    });
  }

  Size getDeviceSize(BuildContext context) {
    return MediaQuery.of(context).size;
  }
}

class TimerWidget extends StatefulWidget {
  String name;
  String title;

  @override
  State<StatefulWidget> createState() {
    var state = new _TimerWidgetState();
    state.startClock();
    return state;
  }
}

class _TimerWidgetState extends ClockBaseState<TimerWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      child: Stack(
        alignment: AlignmentDirectional.center,
        // mainAxisAlignment: MainAxisAlignment.spaceAround,
        //用来决定没有Positioned方式时候子Widget的大小，StackFit.loose 指的是子Widget 多大就多大，StackFit.expand使子Widget的大小和父组件一样大
        fit: StackFit.loose,
        children: [
          Image.asset("assets/images/bg02.webp"),
          Container(
            margin: EdgeInsets.all(80),
            child: ClipRect(
              // 可裁切矩形
              child: BackdropFilter(
                // 背景过滤器
                filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                child: Opacity(
                    opacity: 0.5,
                    child: Container(
                      margin: EdgeInsets.all(80),
                    )),
              ),
            ),
          ),
          Container(
              // color: Colors.red,
              margin: EdgeInsets.all(80),
              child: Column(
                children: [
                  Container(
                    margin: EdgeInsets.only(top: 20),
                    alignment: Alignment.topCenter,
                    child: Text(
                      "${now.year}-${now.month}-${now.day} 星期${ChineseWeekDays[now.weekday]}",
                      style: TextStyle(
                          color: Colors.white, decoration: TextDecoration.none),
                    ),
                  ),
                  Container(
                    // color: Colors.blue,
                    alignment: Alignment.center,
                    child: Text(
                      "${pad0(now.hour)}:${pad0(now.minute)}:${pad0(now.second)}",
                      style: TextStyle(
                          fontSize: 160,
                          color: Colors.white,
                          decoration: TextDecoration.none),
                    ),
                  ),
                ],
              ))
        ],
      ),
    );
  }
}
